導(dǎo)讀:在網(wǎng)站建設(shè)設(shè)計(jì)中,網(wǎng)頁設(shè)計(jì)是核心,核心不僅僅體現(xiàn)在網(wǎng)頁設(shè)計(jì)上,還體現(xiàn)在網(wǎng)頁的布局上,往往一個(gè)精密的網(wǎng)站布局體現(xiàn)網(wǎng)站的戰(zhàn)略眼光和專業(yè)水平。在網(wǎng)站建設(shè)中,常用的網(wǎng)站布局有以下
發(fā)表日期:2019-11-15
文章編輯:興田科技
瀏覽次數(shù):7923
標(biāo)簽:
在網(wǎng)站建設(shè)設(shè)計(jì)中,網(wǎng)頁設(shè)計(jì)是核心,核心不僅僅體現(xiàn)在網(wǎng)頁設(shè)計(jì)上,還體現(xiàn)在網(wǎng)頁的布局上,往往一個(gè)精密的網(wǎng)站布局體現(xiàn)網(wǎng)站的戰(zhàn)略眼光和專業(yè)水平。在網(wǎng)站建設(shè)中,常用的網(wǎng)站布局有以下5種常用的方式和技巧。
1.頂部大圖Banner+簡(jiǎn)單的柵格
無論屏幕多大,這種布局都能夠?yàn)橛脩粽故境渥愕膬?nèi)容,供用戶瀏覽和探索。雖然這種布局隨著屏幕、設(shè)備而有所差異,有的設(shè)計(jì)師會(huì)傾向于設(shè)計(jì)成固定寬或者橫跨整個(gè)頁面的布局,但是總體的模式都大同小異。
導(dǎo)航欄
頂部大圖,圖片上疊有文字標(biāo)題
2~4個(gè)分欄,承載不同類別的信息,有的會(huì)有圖標(biāo)
主要的內(nèi)容區(qū)域
頁腳
這種布局設(shè)計(jì)干凈清爽,有足夠強(qiáng)的視覺表現(xiàn)力,并且常常采用的響應(yīng)式設(shè)計(jì),斷點(diǎn)也很好控制。頂部大面積的輪播圖或者Banner也有許多插件或者應(yīng)用來幫你實(shí)現(xiàn)。
2.單頁式設(shè)計(jì)這幾年非常火,它非常適宜于展現(xiàn)極簡(jiǎn)的內(nèi)容,或者專注呈現(xiàn)一個(gè)主題。當(dāng)網(wǎng)站的主題集中,內(nèi)容也比較固定的時(shí)候,無需復(fù)雜的布局來呈現(xiàn),單頁單列式的布局足以應(yīng)付一切。
導(dǎo)航
主要內(nèi)容區(qū)域,文字+圖片為主
頁腳
采用這種布局模式的時(shí)候,空間的控制至關(guān)重要,相當(dāng)考驗(yàn)設(shè)計(jì)師設(shè)計(jì)留白和布局平衡的功力。元素和元素之間的疏密關(guān)系是需要設(shè)計(jì)師反復(fù)推敲的,如果空間控制不合理會(huì)給用戶一種混亂的感覺,如果過于緊密則會(huì)產(chǎn)生局促感。
原理:?jiǎn)雾撌皆O(shè)計(jì)適合于小網(wǎng)站或者小型項(xiàng)目的展示,它可以用來制造一個(gè)簡(jiǎn)單的介紹頁面,讓簡(jiǎn)單的內(nèi)容顯得不那么單調(diào),強(qiáng)化內(nèi)容的形式感和重量感。對(duì)于內(nèi)容簡(jiǎn)單的博客網(wǎng)站而言,單頁式設(shè)計(jì)也是不錯(cuò)的選擇。
相關(guān)趨勢(shì):和單頁設(shè)計(jì)結(jié)合最緊密的應(yīng)該是動(dòng)效設(shè)計(jì)和視差滾動(dòng),他們可以讓單頁式設(shè)計(jì)更加生動(dòng)有趣,淡化單調(diào)的設(shè)計(jì),賦予頁面更強(qiáng)的生命力。
3.通欄
這種布局方式相對(duì)于大框套小框而言,用戶瀏覽網(wǎng)頁不在受到方框的限制,這種方式顯得大氣些,眼界顯得更開闊些。
另外這種方式還有一個(gè)便利之處那就是主視覺部分可以隨機(jī)靈活處理,既能往上移到網(wǎng)站logo和導(dǎo)航的位置,也可以移到向下擴(kuò)展的內(nèi)容區(qū)域。這種布局方式也是網(wǎng)站中常用的布局方式。
4.導(dǎo)航在主視覺下方的布局。
這種布局方式在一些資訊門戶網(wǎng)站中還是比較常見的,導(dǎo)航直接放置在banner的下面,這可以彌補(bǔ)banner中設(shè)計(jì)素材被截?cái)嗟娜毕荨?/p>
另外這種布局方式,用戶打開網(wǎng)頁就能看到網(wǎng)站的導(dǎo)航,這樣對(duì)于新客戶來說是及其友好的,新客戶不用刻意去尋找網(wǎng)站的導(dǎo)航,而且訪客可以通過第一眼就能分清網(wǎng)站主要導(dǎo)航內(nèi)容。
5.極簡(jiǎn)分層
極簡(jiǎn)化的設(shè)計(jì)一直都在流行,它的流行不是沒有原因的。開放式的空間讓用戶感覺更加輕松,也使得其中展現(xiàn)的內(nèi)容更容易被聚焦。如果極簡(jiǎn)化的頁面中加入不多的幾個(gè)并列的內(nèi)容層,可以讓信息更有層次,也使得極簡(jiǎn)的頁面擁有了細(xì)節(jié)。
這種設(shè)計(jì)并不復(fù)雜,但是讓頁面更加有趣了,它可以適配更多不同類型的項(xiàng)目了。這也解釋了為什么用戶如此的喜愛類似Apple官網(wǎng)這樣的設(shè)計(jì)。
原理:極簡(jiǎn)化的頁面中加入簡(jiǎn)單的幾個(gè)分層,讓頁面有了視覺焦點(diǎn),尤其是當(dāng)設(shè)計(jì)者想要引導(dǎo)用戶關(guān)注到某個(gè)關(guān)鍵的內(nèi)容的時(shí)候,這種頁面布局很很容易實(shí)現(xiàn)這一點(diǎn)。
相關(guān)趨勢(shì):微妙的陰影和漸變常常被用在這樣的頁面當(dāng)中,強(qiáng)化元素之間的層次感。雖然這些設(shè)計(jì)手法一度“過時(shí)”,但是現(xiàn)在大有卷土重來之勢(shì),而Material Design這樣的設(shè)計(jì)風(fēng)格就是它們的沖鋒號(hào)。
許多設(shè)計(jì)手法、設(shè)計(jì)趨勢(shì)都常常會(huì)被人質(zhì)疑,但是如果撇開情感因素,從最基本的設(shè)計(jì)原理上來推導(dǎo)這些趨勢(shì)的時(shí)候,能夠從根本上判讀這些設(shè)計(jì)手法是否真的是有價(jià)值的。
今天所談及的這些布局是經(jīng)過時(shí)間洗煉的經(jīng)典設(shè)計(jì),挑選合適的設(shè)計(jì)趨勢(shì)同這些布局結(jié)合起來,常常能夠帶來不錯(cuò)的效果。
上一篇:
暫無信息更多新聞
2020
關(guān)于搜索引擎優(yōu)化,當(dāng)淘寶流行的時(shí)候,能用“刷”來提升產(chǎn)品關(guān)鍵詞排名,那SEO能用“刷”提升關(guān)鍵詞再查找引擎自然排名嗎?這一問題其實(shí)也并非許多朋友所質(zhì)疑
View details
2020
關(guān)于搜索引擎優(yōu)化,熟練掌握百度seo排名的原理,正確執(zhí)行,稱為seo大神。事實(shí)上,百度等搜索引擎的排名原理是很容易掌握和理解的,真正的難題或者說問題在于執(zhí)
View details
2020
關(guān)于網(wǎng)站優(yōu)化,看一下對(duì)方網(wǎng)站的目標(biāo)關(guān)鍵詞是什么,搜索一下這些關(guān)鍵詞,看看這個(gè)網(wǎng)站整體排名如何。同樣,這里并不要求一定是排前二十名,只要能在前一兩百名
View details
2020
關(guān)于網(wǎng)站優(yōu)化,新進(jìn)企業(yè)要想在網(wǎng)站優(yōu)化行業(yè)立足,首先要掌握行業(yè)基礎(chǔ)知識(shí),這是新進(jìn)企業(yè)的基本素質(zhì)。新兵自身素質(zhì)的培養(yǎng)很重要,最優(yōu)化,下面小編告訴大家新手
View details